<template>
	<div class="app-container">
		<jk-operation-card>
			<div ref="box1" class="flex-between-center-wrap">
				<div class="flex-start-center-wrap">
					<jk-add-button :permission-prefix="prefix" class="item-gap margin-5-0" @click="onAddBtn({})">新增</jk-add-button>
				</div>
				<div class="flex-end-center-wrap">
					<jk-search-input v-model="searchParams.name" placeholder="菜单名称" size="small" class="search-bar-item-size2 item-gap margin-5-0" clearable @clear="onSearchBtn" @keyup.enter.native="onSearchBtn" />
					<jk-search-button type="primary" size="small" icon="el-icon-search" @click="onSearchBtn"></jk-search-button>
				</div>
			</div>
		</jk-operation-card>
		<jk-card class="margin-top-10">
			<jk-table
				v-if="!tableLoading"
				ref="jkTable"
				resizable
				:loading="tableLoading"
				row-id="id"
				:data="menuList"
				:height="tableHeight + 20"
				row-key
				:expand-config="{expandRowKeys: defaultExpandKeys}"
				:tree-config="{rowField: 'id', parentField: 'parentId', expandRowKeys: defaultExpandKeys}"
			>
				<vxe-column field="name" title="菜单名称" tree-node :width="250"></vxe-column>
				<vxe-column field="path" title="菜单名称" :min-width="210"></vxe-column>
				<vxe-column field="icon" title="图标" align="center" :width="70">
					<template slot-scope="scope">
						<el-tag v-if="scope.row.icon" type="primary" style="font-size: 20px;">
							<i :class="scope.row.icon"></i>
						</el-tag>
					</template>
				</vxe-column>
				<vxe-column field="sort" title="排序" :width="60" align="center"></vxe-column>
				<vxe-column field="permission" title="权限标识" :min-width="270"></vxe-column>
				<!--<vxe-column field="component" title="组件路径" :min-width="300"></vxe-column>-->
				<vxe-column field="status" title="状态" align="center" :width="80">
					<template slot-scope="scope">
						<jk-base-status :status="scope.row.status"></jk-base-status>
					</template>
				</vxe-column>
				<vxe-column field="keepAlive" title="是否缓存" align="center" :width="90">
					<template slot-scope="scope">
						<span>{{ scope.row.keepAlive ? '是' : '否' }}</span>
					</template>
				</vxe-column>
				<vxe-column title="创建人" align="left" field="creatorName" width="90"></vxe-column>
				<vxe-column title="创建时间" align="left" field="createTime" width="160"></vxe-column>
				<vxe-column title="修改人" align="left" field="updaterName" width="90"></vxe-column>
				<vxe-column title="修改时间" align="left" field="updateTime" width="160"></vxe-column>
				<vxe-column title="操作" :width="220" fixed="right" align="center" class-name="small-padding fixed-width">
					<template slot-scope="scope">
						<div class="flex-center">
							<jk-delete-button class="item-gap" :permission-prefix="prefix" @on-confirm="onDeleteBtn(scope.row)"></jk-delete-button>
							<jk-edit-button class="item-gap" :permission-prefix="prefix" @click="onEditBtn(scope.row)"></jk-edit-button>
							<jk-add-button :permission-prefix="prefix" size="mini" type="default" @click="onAddBtn(scope.row)"></jk-add-button>
						</div>
					</template>
				</vxe-column>
			</jk-table>
		</jk-card>
		<save-dialog
			:dialog-state="saveDialogState"
			:data-id="dataId"
			:is-add="isAdd"
			@on-visible-change="onVisibleChangeOfSaveDialog"
			@on-finish="onConfirmButtonSaveDialog"
		/>
	</div>
</template>

<script>
    import { systemMenuList, systemMenuDelete } from '../../../api/system/menu';
    import permissionMixin from '../../../mixins/permission-mixin';
    import calHeight from '../../../mixins/cal-table-height';
    import saveDialog from './save-dialog';
    import { createTree } from '../../../utils/jk/jk-tool';
    import jkBaseStatus from './components/jk-base-status';
    export default {
        name: 'Menu',
        mixins: [permissionMixin, calHeight],
        components: { saveDialog, jkBaseStatus },
        data() {
            return {
                prefix: 'system:menu',
                defaultExpandKeys: [],
                isAdd: false,
                dataId: null,
                saveDialogState: false,
                tableLoading: true,
                menuList: [],
                searchParams: {
                    name: null,
                    visible: null
                }
            };
        },
        mounted() {
            this.getListRequest();
        },
        methods: {
            onConfirmButtonSaveDialog() {
                this.saveDialogState = false;
                this.getListRequest();
            },
            onVisibleChangeOfSaveDialog(e) {
                if (!e) {
                    this.dataId = null;
                }
                this.saveDialogState = e;
            },
            /** 查询菜单列表 */
            getListRequest() {
                this.tableLoading = true;
                systemMenuList(this.searchParams).then(res => {
                    if (res.data.status === 200) {
                        this.rawDataModuleList = JSON.parse(JSON.stringify(res.data.res));
                        this.menuList = createTree(JSON.parse(JSON.stringify(res.data.res)), {});
                        this.defaultExpandKeys = this.getParentIds(this.currentNodeId);
                    }
                    this.tableLoading = false;
                });
            },
            getParentIds(id) {
                let ids = [];
                if (id) {
                    ids = [id];
                    this.recursionData(id, ids);
                }
                return ids;
            },
            recursionData(id, ids) {
                this.rawDataModuleList.forEach(x => {
                    if (x.id === id) {
                        ids.unshift(x.parentId);
                        this.recursionData(x.parentId, ids);
                    }
                });
            },
            /** 搜索按钮操作 */
            onSearchBtn() {
                this.getListRequest();
            },
            /** 新增按钮操作 */
            onAddBtn(row) {
                this.dataId = row.id ? row.id : null;
                this.currentNodeId = row.id;
                this.isAdd = true;
                this.saveDialogState = true;
            },
            /** 修改按钮操作 */
            onEditBtn(row) {
                this.isAdd = false;
                this.dataId = row.id;
                this.currentNodeId = row.id;
                this.saveDialogState = true;
            },
            /** 删除按钮操作 */
            onDeleteBtn(row) {
                this.currentNodeId = row.parentId;
                systemMenuDelete(row.id).then(() => {
                    this.getListRequest();
                    this.$tipsBar(this, 'delete');
                }).catch(() => {});
            }
        }
    };
</script>
